﻿@using System.ComponentModel.DataAnnotations

<div class="demo-description">
    <h2><DemoNavLink Link="FormValidation#FormLayout" />Form Layout</h2>
    <p>
        Our <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayout">Form Layout</a> component allows you to easily construct responsive and automatically-aligned edit forms.
        The standard <b>EditForm</b> component enables data validation.
        This demo shows how you can use the two components together.
    </p>
    <p>
        Inside the <b>EditForm</b>, the code adds a <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayout">Form Layout</a> component with four <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayoutItem">layout items</a>. Each item contains a DevExpress Data Editor:
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTextBox">Text Box</a></li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxComboBox-2">ComboBox</a></li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxSpinEdit-1">Spin Edit</a></li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDateEdit-1">Date Edit</a></li>
    </ul>
    <p>
        The <b>EditForm</b> also contains the DevExpress <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxButton">Button</a> component with the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxButton.SubmitFormOnClick">SubmitFormOnClick</a> option set to <b>true</b>.
        As in the previous demo, once you attempt to submit changes, editors become marked with colored outlines.
        <span class="invalid" style="color:red;">Red</span> indicates invalid values, while <span class="modified" style="outline: 1px solid #26b050; color:#26b050;">green</span> indicates values that were posted successfully.
    </p>
    <p>
        Below the form the standard Blazor <b>ValidationSummary</b> component displays the validation summary.
    </p>
</div>

<div class="card demo-card-wide demo-card-shadow">
    <div class="card-header">
        <DemoToolbar ShowSizeSelector="false"
                     Title="@FormValidationState" />
    </div>
    <div class="card-body">
        <EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit" Context="EditFormContext">
            <DataAnnotationsValidator />
            <DxFormLayout>
                <DxFormLayoutItem Caption="Identifier:" ColSpanMd="6">
                    <Template>
                        <DxTextBox @bind-Text="@starship.Identifier" />
                        @*<ValidationMessage For="@(() => starship.Identifier)" />*@
                    </Template>
                </DxFormLayoutItem>

                <DxFormLayoutItem Caption="Primary Classification:" ColSpanMd="6">
                    <Template>
                        <DxComboBox NullText="Select classification ..."
                                    ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
                                    Data="@(new List<string>() { "Defense", "Exploration", "Diplomacy" })"
                                    @bind-Value="@starship.Classification" />
                        @*<ValidationMessage For="@(() => starship.Classification)" />*@
                    </Template>
                </DxFormLayoutItem>

                <DxFormLayoutItem Caption="Maximum Accommodation:" ColSpanMd="6">
                    <Template>
                        <DxSpinEdit Id="accommodation" @bind-Value="@starship.MaximumAccommodation" />
                        @*<ValidationMessage For="@(() => starship.MaximumAccommodation)" />*@
                    </Template>
                </DxFormLayoutItem>

                <DxFormLayoutItem Caption="Production Date:" ColSpanMd="6">
                    <Template>
                        <DxDateEdit @bind-Date="@starship.ProductionDate" />
                        @*<ValidationMessage For="@(() => starship.ProductionDate)" />*@
                    </Template>
                </DxFormLayoutItem>

                <DxFormLayoutItem ColSpanMd="12">
                    <Template>
                        <DxButton SubmitFormOnClick="true" Text="Submit" RenderStyle="ButtonRenderStyle.Secondary" />
                    </Template>
                </DxFormLayoutItem>

                <DxFormLayoutItem ColSpanMd="12">
                    <Template>
                        <ValidationSummary />
                    </Template>
                </DxFormLayoutItem>

            </DxFormLayout>

        </EditForm>
    </div>
</div>

<CodeSnippet_FormValidation_FormLayout />

@code {
    string FormValidationState = @"Press the ""Submit"" button to validate the form.";
    private Starship starship = new Starship() { ProductionDate = DateTime.Now + TimeSpan.FromDays(1) };

    private void HandleValidSubmit() {
        FormValidationState = @"Form data is valid";
    }
    private void HandleInvalidSubmit() {
        FormValidationState = @"Form data is invalid";
    }

    [AttributeUsage(AttributeTargets.Property | AttributeTargets.Field | AttributeTargets.Parameter, AllowMultiple = false)]
    public class DateInPastAttribute : ValidationAttribute {
        public override bool IsValid(object value) {
            return (DateTime)value <= DateTime.Today;
        }
    }

    public class Starship {
        [Required(ErrorMessage = "The Identifier value should be specified.")]
        [StringLength(16,
        ErrorMessage = "The Identifier exceeds 16 characters.")]
        public string Identifier { get; set; }

        [Required(ErrorMessage = "The Primary Classification value should be specified.")]
        public string Classification { get; set; }

        [Range(1, 100000, ErrorMessage = "The Maximum Accommodation value should be a number between 1 and 100,000.")]
        public int MaximumAccommodation { get; set; }

        [Required]
        [DateInPastAttribute(ErrorMessage = "The Production Date value cannot be later than today.")]
        public DateTime ProductionDate { get; set; }
    }
}
